<<<<<<< HEAD
<!DOCTYPE html>
<html>

<head>
  <title>成员介绍</title>
  <style>
    .member-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }

    .member-container img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 20px;
    }

    .member-info {
      flex: 1;
    }

    .member-info h2 {
      margin: 0;
    }

    .member-info p {
      margin: 5px 0;
    }
  </style>
</head>

<body>
  <div id="app">
    <div v-for="(member, index) in members" :key="index" class="member-container">
      <img :src="member.image" :alt="member.name">
      <div class="member-info">
        <h2>{{ member.name }}</h2>
        <p>班级：{{ member.class }}</p>
        <p>爱好：{{ member.hobby }}</p>
      </div>
    </div>
  </div>

  <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        members: [
          {
            name: "杨可",
            class: "移动2131",
            hobby: "唱",
            image: "./1.png"
          },
          {
            name: "谢锦涛",
            class: "移动2131",
            hobby: "跳",
            image: "./2.png"
          },
          {
            name: "周澜",
            class: "移动2131",
            hobby: "rap",
            image: "./3.png"
          },
          {
            name: "陈乃钦",
            class: "移动2131",
            hobby: "篮球",
            image: "./4.png"
          },
          {
            name: "张怡阳",
            class: "移动2131",
            hobby: "music",
            image: "./5.png"
          }
        ]
      }
    });
  </script>
</body>

</html>
=======
<!DOCTYPE html>
<html>
<head>
  <title>成员介绍</title>
  <style>
    .member-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }

    .member-container img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 20px;
    }

    .member-info {
      flex: 1;
    }

    .member-info h2 {
      margin: 0;
    }

    .member-info p {
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-for="(member, index) in members" :key="index" class="member-container">
      <img :src="member.image" :alt="member.name">
      <div class="member-info">
        <h2>{{ member.name }}</h2>
        <p>班级：{{ member.class }}</p>
        <p>爱好：{{ member.hobby }}</p>
      </div>
    </div>
  </div>

  <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      members: [
        {
          name: "杨可",
          class: "移动2131",
          hobby: "唱",
          image: "1.png"
        },
        {
          name: "谢锦涛",
          class: "移动2131",
          hobby: "跳",
          image: "2.png"
        },
        {
          name: "周澜",
          class: "移动2131",
          hobby: "rap",
          image: "3.png"
        },
        {
          name: "陈乃钦",
          class: "移动2131",
          hobby: "篮球",
          image: "4.png"
        },
        {
          name: "张怡阳",
          class: "移动2131",
          hobby: "music",
          image: "5.png"
        }
      ]
    }
  });
</script>
</body>
</html>
>>>>>>> ddb2a672ca07d326c81970d8b09e5ff522ab9c9a
